import React, { useReducer } from 'react'
import A from './a'
import B from './b'
import C from './c'
import AppContext from './context'

/**
 * useContext
 * 共享数据
 * 确切的说是, 共享上下文环境,
 * 即是, 你变我也变, 嘿哈
 *
 * createContext({})
 * useContext 接收一个 context 对象（React.createContext 的返回值）
 * 并返回该 context 的当前值。
 * 当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。
 *
 * 当组件上层最近的 <MyContext.Provider> 更新时，
 * 该 Hook 会触发重渲染，
 * 并使用最新传递给 MyContext provider 的 context value 值。
 *
 */

const Foo: React.FC = () => {
	// 使用 useReducer 减少 Context 的复杂程度
	const reducer = (state: any, action: any) => {
		const newState = { ...state }
		switch (action) {
			case 'add':
				newState.count++
				break
			case 'step':
				newState.step++
				break
			default:
				break
		}
		return newState
	}
	const initState = { count: 0, step: 0 }
	const [state, dispatch] = useReducer(reducer, initState)
	console.log('useContext/index.tsx...', state)

	// 将 state dispatch 通过 Context 传递给子组件
	return (
		<>
			<AppContext.Provider value={{ state, dispatch }}>
				<div>{state.count}, {state.step}</div>
				<A />
				<B />
				<C />
			</AppContext.Provider>
		</>
	)
}
export default Foo
